<template>
    <div class="qb" style="height: 1000px;">
    <div style="position: relative;top: 10px;font-weight: bold;color: #000;font-size: 20px;">我的</div>
    <ul>
        <li style="width: 350px;font-weight: bold;">
            <span>影片</span>
            <span>名称</span>
            <span>价格</span>
            <span>票数</span>
            <span></span>
        </li>
        <li v-for="item in cart" :key="item.id" class="wb" style="font-weight: bold;">
            <span><img :src="item.src" alt=""></span>
            
            <span style="font-size: 15px;">{{ item.title }}</span>
            <span style="font-size: 15px;">{{ item.price }}</span>
            <span>{{ item.count }}</span>
            <span @click="deleteCart(item.id)" class="gman">删除</span>
        </li>
    </ul>
    <div>
        总金额：{{ total }}元,总数：{{ count }}。<br>
        
         <span @click="gotoProduct" >
            <button class="jx">
              继续瞅瞅  
            </button>
        </span>   
        
    </div>    
    </div>
    
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useStore } from '../store';
import { useRouter } from 'vue-router';
const router=useRouter()

const store = useStore()
const { cart,total,count } = storeToRefs(store)
const deleteCart=(id)=>{
    store.reduceProduct(id)
}
 const gotoProduct=()=>{
    router.push({name:'users'})
}
</script>

<style scoped>
.qb{
    background-color: #ebc386;
}
ul,li {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

li img {
    width: 60px;
}

span {
    flex: 1;
    text-align: center;
    line-height: 60px;
}
.wb{
    width: 350px;
    font-size: 13px;
}
.wb img{
    width: 70px;
    height: 90px;
}
.gman{
    font-size: 15px;
    height: 55px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transition:  background-color 0.15s ease-in-out;
    cursor: pointer;
    user-select: none;
    font-weight:bold ;
}
.gman:hover{
    color:#f91919;
    background-color: rgba(125, 124, 124, 0.15);
}
.jx{
    font-size: 18px;
    width: 100px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transition:  background-color 0.15s ease-in-out;
    cursor: pointer;
    user-select: none;
}
.jx:hover{
    color:#edb336;
    background-color: rgba(125, 124, 124, 0.15);
}
</style>